﻿<!--
 * @Author: 张坤
 * @Date: 2021-01-14 14:00:57
 * @LastEditTime: 2021-01-14 14:51:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Canvas冬季下雪场景特效\index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>❉芳芳专属相册❉</title>
  <script src="js/jquery.min.js"></script>
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/style1.css" />
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: #000000;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul class="minbox">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ol class="maxbox">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>
  <div id="contents">
    <canvas id="canvas">This browser cannot use a canvas.</canvas>
  </div>

  <script src="js/script.js"></script>

  <div style="
        text-align: center;
        margin: 50px 0;
        font: normal 14px/24px 'MicroSoft YaHei';
      "></div>
  <audio autoplay="autopaly" loop="loop" id="audios">
    <source src="./renxi.mp3" type="audio/mp3" />
  </audio>
  <script>
    function init() {
      if (
        navigator.userAgent.match(
          /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
      ) {
        var box = document.querySelectorAll(".box")[0];
        box.style.marginTop = "65%";
        box.style.marginLeft = "40%";
      }
    }
    $(function () {
      init();
    });
    document.addEventListener('click', function () {
      document.getElementById('audios').play()
    })
  </script>
</body>

</html>